"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native"
import { theme } from "../../constants/theme"
import PhoneticDetailSheet from "./PhoneticDetailSheet"

// 字母组合数据
const COMBINATION_DATA = [
    {
        combination: "ch",
        totalPronunciations: 3,
        phoneticSymbols: [
            { symbol: "tʃ", frequency: 210 },
            { symbol: "k", frequency: 85 },
            { symbol: "ʃ", frequency: 45 },
        ],
        examples: [
            {
                word: "chair",
                phonetic: "tʃeə(r)",
                partOfSpeech: "n",
                meaning: "椅子",
                targetLetter: "ch",
            },
            {
                word: "school",
                phonetic: "skuːl",
                partOfSpeech: "n",
                meaning: "学校",
                targetLetter: "ch",
            },
            {
                word: "machine",
                phonetic: "məˈʃiːn",
                partOfSpeech: "n",
                meaning: "机器",
                targetLetter: "ch",
            },
        ],
    },
    {
        combination: "sh",
        totalPronunciations: 1,
        phoneticSymbols: [{ symbol: "ʃ", frequency: 180 }],
        examples: [
            {
                word: "ship",
                phonetic: "ʃɪp",
                partOfSpeech: "n",
                meaning: "船",
                targetLetter: "sh",
            },
            {
                word: "fish",
                phonetic: "fɪʃ",
                partOfSpeech: "n",
                meaning: "鱼",
                targetLetter: "sh",
            },
        ],
    },
    {
        combination: "th",
        totalPronunciations: 2,
        phoneticSymbols: [
            { symbol: "θ", frequency: 120 },
            { symbol: "ð", frequency: 110 },
        ],
        examples: [
            {
                word: "think",
                phonetic: "θɪŋk",
                partOfSpeech: "v",
                meaning: "思考",
                targetLetter: "th",
            },
            {
                word: "this",
                phonetic: "ðɪs",
                partOfSpeech: "pron",
                meaning: "这个",
                targetLetter: "th",
            },
        ],
    },
]

// 字母组合分组数据
const COMBINATION_GROUPS = {
    ch: [
        {
            symbol: "tʃ",
            description: "大多数情况下发[tʃ]音",
            examples: ["chair", "child", "church", "teach"],
        },
        {
            symbol: "k",
            description: "希腊语源词中通常发[k]音",
            examples: ["school", "chemistry", "chorus", "character"],
        },
        {
            symbol: "ʃ",
            description: "法语源词中通常发[ʃ]音",
            examples: ["machine", "chef", "champagne", "chalet"],
        },
    ],
    sh: [
        {
            symbol: "ʃ",
            description: "通常发[ʃ]音",
            examples: ["ship", "shop", "fish", "dish"],
        },
    ],
    th: [
        {
            symbol: "θ",
            description: "清辅音，舌尖放在上下齿之间，送气",
            examples: ["think", "thank", "mouth", "bath"],
        },
        {
            symbol: "ð",
            description: "浊辅音，舌尖放在上下齿之间，声带振动",
            examples: ["this", "that", "father", "breathe"],
        },
    ],
}

export default function LetterCombinationsTab() {
    const [selectedCombination, setSelectedCombination] = useState<string | null>(null)
    const [selectedCombinationData, setSelectedCombinationData] = useState<any>(null)

    const handleCombinationPress = (combination: string) => {
        setSelectedCombination(combination)
        const combinationData = COMBINATION_DATA.find((item) => item.combination === combination)
        setSelectedCombinationData(combinationData)
    }

    const playAudio = (word: string) => {
        // Simulate audio playback
        console.log(`Playing audio for: ${word}`)
    }

    return (
        <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
            {/* Combination Grid */}
            <View style={styles.letterGrid}>
                {COMBINATION_DATA.map((item, index) => (
                    <TouchableOpacity
                        key={index}
                        style={styles.letterItem}
                        onPress={() => handleCombinationPress(item.combination)}
                        activeOpacity={0.7}
                    >
                        <Text style={styles.letterText}>{item.combination}</Text>
                        <Text style={styles.letterCount}>{item.totalPronunciations}</Text>
                    </TouchableOpacity>
                ))}
            </View>

            {/* Combination Groups */}
            {Object.entries(COMBINATION_GROUPS).map(([combination, items]) => (
                <View key={combination} style={styles.group}>
                    <Text style={styles.groupTitle}>组合 {combination}</Text>
                    {items.map((item, index) => (
                        <View key={index} style={styles.phoneticItem}>
                            <View style={styles.symbolContainer}>
                                <Text style={styles.symbol}>[{item.symbol}]</Text>
                            </View>
                            <View style={styles.contentContainer}>
                                <Text style={styles.description}>{item.description}</Text>
                                <View style={styles.examplesContainer}>
                                    {item.examples.map((word, wordIndex) => (
                                        <TouchableOpacity key={wordIndex} style={styles.wordButton} onPress={() => playAudio(word)}>
                                            <Text style={styles.wordText}>{word}</Text>
                                        </TouchableOpacity>
                                    ))}
                                </View>
                            </View>
                        </View>
                    ))}
                </View>
            ))}

            <PhoneticDetailSheet
                visible={!!selectedCombination}
                onClose={() => {
                    setSelectedCombination(null)
                    setSelectedCombinationData(null)
                }}
                letter={selectedCombination || ""}
                phoneticData={selectedCombinationData}
            />
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    letterGrid: {
        flexDirection: "row",
        flexWrap: "wrap",
        padding: theme.spacing.md,
        gap: theme.spacing.sm,
    },
    letterItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.sm,
        width: "30%",
        shadowColor: "rgba(0,0,0,0.1)",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.5,
        shadowRadius: 4,
        elevation: 2,
    },
    letterText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    letterCount: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        opacity: 0.7,
    },
    group: {
        marginBottom: theme.spacing.md,
        paddingHorizontal: theme.spacing.md,
    },
    groupTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.sm,
    },
    phoneticItem: {
        flexDirection: "row",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        marginBottom: theme.spacing.sm,
        padding: theme.spacing.md,
        shadowColor: "rgba(0,0,0,0.1)",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.5,
        shadowRadius: 4,
        elevation: 2,
    },
    symbolContainer: {
        width: 50,
        height: 50,
        borderRadius: 25,
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.md,
    },
    symbol: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.primary.default,
    },
    contentContainer: {
        flex: 1,
    },
    description: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
        marginBottom: theme.spacing.xs,
    },
    examplesContainer: {
        flexDirection: "row",
        flexWrap: "wrap",
        gap: theme.spacing.xs,
    },
    wordButton: {
        backgroundColor: "rgba(91, 142, 244, 0.05)",
        paddingHorizontal: theme.spacing.sm,
        paddingVertical: theme.spacing.xs,
        borderRadius: theme.borderRadius.medium,
    },
    wordText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.black,
    },
})

